<template>
  <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="recordIsCollapse" router :default-active="activePath">
    <!-- 一级菜单 -->
    <el-submenu :index="`${item.id}''`" v-for="item in menuList" :key="item.id">
      <!-- 一级菜单内容 -->
      <template slot="title">
        <i :class="iconsObj[item.id]"></i>
        <span>{{item.authName}}</span>
      </template>
      <!-- 二级级菜单区域 -->
      <el-menu-item :index="`${subitem.path}`" v-for="subitem in item.children" :key="subitem.id" @click="saveNavState(subitem.path)">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{subitem.authName}}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
// 导入封装的根路径文件，发送用户登录信息
import request from '@/utils/request.js'
export default {
  name: 'Aside',
  data() {
    return {
      // 存左侧导航栏数据
      menuList: [],
      // 导航栏图标数据
      iconsObj: {
        125: 'el-icon-user',
        103: 'el-icon-s-tools',
        101: 'el-icon-s-goods',
        102: 'el-icon-s-order',
        145: 'el-icon-s-data'
      },
      // 控制折叠展开
      isCollapse: true,
      // 菜单是否高亮数据
      activePath: ''
    }
  },
  // 利用计算属性自动记录isCollapse当前值
  computed: {
    recordIsCollapse() {
      return this.isCollapse
    }
  },
  created() {
    // 创建aside组件时调用请求数据函数
    this.getMenuList()
    // 组件创建完成是时获取本地存的值给activePath，从而实现点击菜单，菜单保持高亮
    this.activePath = sessionStorage.getItem('activePath')
  },
  methods: {
    // 请求左侧导航栏数据
    async getMenuList() {
      const { data: res } = await request.get('menus')
      // 数据每次回来都要判断是否成功
      if (res.meta.status === !200) {
        return res.meta.msg
      }
      // 将请求回来的数据转存在menuList
      this.menuList = res.data
    },
    // 保存每次点击的菜单的index值给本地，当界面显示出来时及时把本地对应的拿出来，做到当前点击的菜单保持高亮转发状态
    saveNavState(activePath) {
      sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
.el-menu {
  border-right: 0;
}
</style>